<template>
  <div>
    <transition name="el-fade-in-linear">
      <el-dialog title="登录" :visible.sync="centerDialogVisible" width="30%" center>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item label="用户名/邮箱" prop="name">
            <el-input type="text" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" center>
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button @click="centerDialogVisible = false;reginDialogVisible=true">注 册</el-button>
          <el-button type="primary" @click="submitLoginForm('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
    </transition>

    <transition name="el-fade-in">
      <el-dialog title="注册" :visible.sync="reginDialogVisible" width="30%" center>
        <el-form :model="ruleForm" :rules="rules" ref="ruleReginForm">
          <el-form-item label="用户名" prop="name">
            <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="ruleForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" center>
          <el-button @click="reginDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitReginForm('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
    </transition>
  </div>

</template>

<script>
  import {getUserInfo,saveUserInfo} from '../api/cache.js';
  export default {
    data() {
      return {
        centerDialogVisible: false,
        reginDialogVisible: false,
        ruleForm: {
          name: '',
          password: '',
          email:''
        },
        formLabelWidth: '120px',
        rules: {
          name: [{
              required: true,
              message: '请输入用户名或邮箱名称',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 10,
              message: '长度在 6 到 10 个字符',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    methods: {
      submitLoginForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('/api/user/login', this.ruleForm).then(response => {
              console.log('登录结果', response.data);
              if (response.data.success) {
                this.centerDialogVisible = false;
                this.$store.state.userInfo = response.data.data;
                //本地缓存
                saveUserInfo(response.data.data);
                this.$emit('reload');
                //跳转到用户中心
                this.$router.push('/user');
              } else {
                this.$message.error(response.data.msg);
              }
            }, response => {
              this.$message.error('错误');
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      submitReginForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('/api/user/register', this.ruleForm).then(response => {
              console.log('注册结果', response.data);
              if (response.data.success) {
                //注册成功弹登录页
                this.reginDialogVisible = false;
                this.centerDialogVisible = true;
              } else {
                this.$message.error(response.data.msg);
              }
            }, response => {
              this.$message.error('错误');
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      openOrCloseWin() {
        this.centerDialogVisible = !this.centerDialogVisible;
      }
    }
  };
</script>

<style>
</style>
